<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IT资源管理平台</title>
  <style type="text/css">

    html,
    body {
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
    }

    body {
      background: rgba(243, 243, 243, 0.618) !important;
      display: flex;
      flex-direction: column;
    }

    *,
    *::before,
    *::after {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }


    ul, ol {
      padding: 0;
      margin: 0;
    }

    ul > li, ol > li {
      list-style: none;
      margin-bottom: 10px;
    }

    header svg {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: 0 auto 5px auto;
    }

    header {
      padding-top: 10px;
      width: 100%;
      height: 70px;
      text-align: center;
      color: rgba(253, 255, 255, 1);
      font-weight: bolder;
      position: relative;
      background: linear-gradient(-90deg, rgba(15, 45, 255, 0.92), rgba(232, 229, 229, 0.8));
    }

    header > p {
      font-size: 1.4em;
      height: 40px;
      margin: 5px 5px;
      text-shadow: 0 1px rgba(122, 174, 195, 0.15), 0 1px rgba(122, 174, 195, 0.3),
      0 1px rgba(122, 174, 195, 0.45), 0 1px rgba(122, 174, 195, 0.65),
      0 1px rgba(122, 174, 195, 0.75), 2px 4px 5px rgba(122, 174, 195, 1);
      /* border: 1px solid #21A5CA;*/
      /*  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);*/
    }

    header>blockquote {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200px;
      height: 30px;
      display: flex;
      justify-content: space-evenly;
    }

    input[id^='openTab'] {
      display: none;
    }

    input[id^="openTab"] + label {
      display: inline-block;
      height: 26px;
      width: 50px;
      box-shadow: 0 1px 4px #ddd;
      background-color: rgb(173, 173, 173);
      color: white !important;
      clip-path: polygon(20% 0%, 100% 0, 80% 100%, 0 100%);
    }


    /* 选定时label的css事件 */
    input[id^="openTab"]:checked + label {
      box-shadow: 0 1px 4px #ddd;
      background-color: rgba(43, 145, 228, 0.85);
    }


    .pop {
      font-size: small;
      border-radius: 5px;
      min-width: 120px;
      padding: 5px;
      box-shadow: 0 1px 4px #ddd;
      color: white;
      background: rgba(0, 0, 0, 0.618);
    }

    .pop ul {
      display: flex;
      justify-content: space-evenly;
      line-height: 20px;
    }

    .pop ul li:first-child {
      width: 65px;
      text-align: right;
      color: #e3d138;
    }

    .pop ul li:nth-child(2) {
      text-shadow: 0 1px rgba(122, 174, 195, 0.15), 0 1px rgba(122, 174, 195, 0.3),
      0 1px rgba(122, 174, 195, 0.45), 0 1px rgba(122, 174, 195, 0.65),
      0 1px rgba(122, 174, 195, 0.75), 2px 4px 5px rgba(122, 174, 195, 1);
      flex: 1;
      width: 100%;
      height: 100%;
      /*width: calc(100% - 80px);
      overflow-wrap: break-word;
      word-break: break-word;
      word-wrap: break-word;*/
    }


    main {
      position: relative;
      display: flex;
      flex: 1;
      width: 100%;
      height: 100%;
      flex-wrap: nowrap;
      background: white;
    }

    main > aside {
      width: 200px;
      height: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #BDCFE4;
    }


    main > section {
      flex: 1;
      width: 100%;
      height: 100%;
    }

    main > section > #cmdbGuideEcharts {
      width: 100%;
      height: 100%;
      flex: 1;
    }

    .searchTree {
      height: 40px;
      width: 100%;
      border: 0;
      border-radius: 5px;
      padding-left: 10px;
    }

    #treeDemo {
      flex: 1;
      width: 100%;
      height: 100%;
    }
  </style>
  <link rel="stylesheet" href="../../../subassembly/visJs/vis.min.css">
  <link rel="stylesheet" href="../../../subassembly/visJs/vis-reset.css">
  <link rel="stylesheet" href="../../../../css/animate/animate.css">
  <link href="../../../subassembly/layui/css/layui.css" rel="stylesheet">
  <link href="../../../subassembly/tree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">

  <script src="../../../subassembly/common/jquery-3.5.1.min.js"></script>
  <script src="../../../subassembly/layui/layui.js"></script>
  <script src="../../../subassembly/visJs/vis.min.js"></script>

  <script src="../../../subassembly/tree/js/jquery.ztree.core.min.js"></script>
  <script src="../../../subassembly/tree/js/jquery.ztree.exedit.min.js"></script>
  <script type="text/javascript" src="../../../subassembly/tree/js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="../../../subassembly/tree/js/jquery.ztree.exhide.js"></script>
  <script type="text/javascript" src="../../../subassembly/tree/js/fuzzysearch.js"></script>

  <script src="../../../subassembly/echarts/echarts.min.js" type="text/javascript"></script>
  <script src="../../../subassembly/common/common.js" type="text/javascript"></script>
  <script src="../../../subassembly/common/underscore-min.js" type="text/javascript"></script>
</head>
<body>
<header>
  <svg width="600px" height="100%" xmlns="http://www.w3.org/2000/svg" stroke="null"
       style="vector-effect: non-scaling-stroke;">
    <defs>
      <linearGradient id="blue_line" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" style="stop-color: rgba(36,99,136, 0.65);"/>
        <stop offset="50%" style="stop-color: rgba(36,99,136, 0.4);"/>
        <stop offset="100%" style="stop-color: rgba(36,99,136, 0.65);"/>
      </linearGradient>
    </defs>
    <g stroke="url(#blue_line)" stroke-width="2">
      <line id="svg_9" y2="85%" x2="84.5%" y1="75%" x1="83%"/>
      <line id="svg_11" y2="20%" x2="2%" y1="0" x1="0"/>
      <line id="svg_12" y2="100%" x2="16%" y1="100%" x1="12%"/>
      <line id="svg_13" y2="90%" x2="17%" y1="100%" x1="16%"/>
      <line id="svg_14" y2="90%" x2="83%" y1="90%" x1="17%"/>
      <line id="svg_15" y2="100%" x2="84%" y1="90%" x1="83%"/>
      <line id="svg_16" y2="100%" x2="88%" y1="100%" x1="84%"/>
      <line id="svg_17" y2="20%" x2="92.5%" y1="85%" x1="87.5%"/>
      <line id="svg_18" y2="20%" x2="98%" y1="20%" x1="94%"/>
      <line id="svg_19" y2="0%" x2="100%" y1="20%" x1="98%"/>
      <line id="svg_20" y2="100%" x2="12%" y1="20%" x1="6%"/>
      <line id="svg_21" y2="85%" x2="82.5%" y1="85%" x1="17.5%"/>
      <line id="svg_23" y2="20%" x2="92.5%" y1="20%" x1="7.5%"/>
      <line id="svg_24" y2="85%" x2="12.5%" y1="20%" x1="7.5%"/>
      <line id="svg_25" y2="85%" x2="87.5%" y1="85%" x1="84.5%"/>
      <line id="svg_26" y2="20%" x2="94%" y1="100%" x1="88%"/>
      <line id="svg_27" y2="80%" x2="18%" y1="85%" x1="17.5%"/>
      <line id="svg_28" y2="75%" x2="83%" y1="75%" x1="16.5%"/>
      <line id="svg_29" y2="85%" x2="82.5%" y1="80%" x1="82%"/>
      <line id="svg_30" y2="80%" x2="18%" y1="80%" x1="82%"/>
      <line x1="2%" y1="20%" x2="6%" y2="20%" id="svg_1"/>
      <line x1="12.5%" y1="85%" x2="15.5%" y2="85%" id="svg_2"/>
      <line x1="16.5%" y1="75%" x2="15.5%" y2="85%" id="svg_3"/>
    </g>
  </svg>
  <p><span id="platform">CRM运维平台</span>影响分析</p>
  <blockquote>
      <input id="openTab1" type="radio" name="tab" value="1" checked="checked"/>
      <label for="openTab1"><img src="../../../../img/topo/icon/detail.svg" width="20"
                                 height="20"></label>
      <input id="openTab3" type="radio" name="tab" value="3"/>
      <label for="openTab3" id="tab3"><img
              src="../../../../img/topo/icon/performs.svg" width="20"
              height="20"></label>
      <input id="openTab4" type="radio" name="tab" value="4"/>
      <label for="openTab4" id="tab4"><img
              src="../../../../img/topo/icon/alarm.svg" width="20"
              height="20"></label>
  </blockquote>
</header>
<main>
  <aside>
    <input type="text" class="searchTree" id="mySearchId" placeholder="业务系统">
    <ul id="treeDemo" class="ztree" style="border: 0;border-radius: 5px;padding-left: 10px;"></ul>
  </aside>
  <section>
    <div id="cmdbGuideEcharts"></div>
  </section>
</main>
<script>

  var star =  'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z'; //五角星

  var pc = 'path://M0 2v20h32v-20h-32zM30 20h-28v-16h28v16zM21 24h-10l-1 4-2 2h16l-2-2z';

  var nginx = 'path://M30.5 24h-0.5v-6.5c0-1.93-1.57-3.5-3.5-3.5h-8.5v-4h0.5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h0.5v4h-8.5c-1.93 0-3.5 1.57-3.5 3.5v6.5h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-0.5v-6h8v6h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5h-0.5v-6h8v6h-0.5c-0.825 0-1.5 0.675-1.5 1.5v5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-5c0-0.825-0.675-1.5-1.5-1.5zM6 30h-4v-4h4v4zM18 30h-4v-4h4v4zM14 8v-4h4v4h-4zM30 30h-4v-4h4v4z';
  var database = "path://M600.255321 133.164178c120.213708 0 219.218733 68.021482 " +
    "232.313549 155.527628h21.531936c-6.225171-97.884819-117.4874-175.858037-253.843452-175.858037S352.637041 " +
    "190.806986 346.411869 288.691806h21.529903c13.094816-87.506146 112.099841-155.527628 " +
    "232.313549-155.527628z,M600.255321 436.760206c-120.213708 0-219.218733-68.021482-232.313549-155.527627H346.409836c6.225171 " +
    "97.884819 117.4874 175.858037 253.843452 175.858036s247.620314-77.973217 " +
    "253.843452-175.858036h-21.531936c-13.09075 87.504113-112.095775 155.527628-232.309483 " +
    "155.527627z,M346.125211 741.541498c0 101.900075 113.7771 184.508626 254.13011 " +
    "184.508625 140.350978 0 254.130111-82.60855 254.130111-184.508625v-444.199103c0-2.901149-0.103685-5.784001-" +
    "0.286659-8.650589h-21.531936c0.971794 6.4854 1.486153 13.076519 1.486153 19.757091v421.988131c0 " +
    "96.803242-104.675176 175.282686-233.799702 175.282686s-233.799702-78.479444-233.799701-175." +
    "282686V308.448897c0-6.680572 0.516392-13.269658 1.486152-19.757091h-21.529903a135.835594 " +
    "135.835594 0 0 0-0.286658 8.650589v444.199103z";

  var ie = 'path://M22.944 19.651h7.377c0.057-0.512 0.080-1.034 0.080-1.569 ' +
    '0-2.507-0.673-4.858-1.848-6.883 1.215-3.228 1.172-5.968-0.455-7.606-1.547-1.54-5.697-1.29-10.388 ' +
    '0.787-0.347-0.026-0.697-0.040-1.051-0.040-6.439 0-11.841 4.431-13.335 ' +
    '10.402 2.020-2.586 4.145-4.461 6.984-5.826-0.258 0.242-1.764 1.739-2.018 ' +
    '1.993-7.486 7.484-9.847 17.26-7.306 19.8 1.931 1.93 5.43 1.604 9.449-0.364 ' +
    '1.869 0.952 3.984 1.488 6.226 1.488 6.035 0 11.15-3.885 13.003-9.295h-7.433c-1.023 ' +
    '1.887-3.023 3.171-5.319 3.171s-4.296-1.284-5.319-3.171c-0.455-0.852-0.716-1.83-' +
    '0.716-2.864v-0.023h12.071zM10.884 16.025c0.171-3.035 2.694-5.456 5.774-5.456s5.604 ' +
    '2.421 5.774 5.456h-11.548zM28.030 5.119c1.048 1.059 1.021 3.007 0.125 5.438-1.535-2.' +
    '341-3.766-4.186-6.4-5.239 2.816-1.207 5.106-1.367 6.274-0.199zM2.921 30.227c-1.337-1.337-0.934-4.144 ' +
    '0.788-7.526 1.072 3.008 3.161 5.534 5.854 7.161-2.982 1.354-5.423 1.584-6.643 0.365z';

  var bird = 'path://M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 ' +
    '1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 ' +
    '1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 ' +
    '6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 ' +
    '0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 ' +
    '0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 ' +
    '0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 ' +
    '1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 ' +
    '2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 ' +
    '1.281-0.919 2.394-2.075 3.275-3.394z';

  var app = 'path://M28 12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM4 ' +
    '12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM7 23c0 1.657 ' +
    '1.343 3 3 3v0 4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h4v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4c1.657 ' +
    '0 3-1.343 3-3v-11h-18v11zM24.944 10c-0.304-2.746-1.844-5.119-4.051-6.551l1.001-2.001c0.247-0.494 ' +
    '0.047-1.095-0.447-1.342s-1.095-0.047-1.342 0.447l-1.004 2.009-0.261-0.104c-0.893-0.297-1.848-0.' +
    '458-2.84-0.458s-1.947 0.161-2.84 0.458l-0.261 0.104-1.004-2.009c-0.247-0.494-0.848-0.694-1.342-0.447s-0.694 ' +
    '0.848-0.447 1.342l1.001 2.001c-2.207 1.433-3.747 3.805-4.051 6.551v1h17.944v-1h-0.056zM13 ' +
    '8c-0.552 0-1-0.448-1-1s0.447-0.999 0.998-1c0.001 0 0.002 0 0.003 0s0.001-0 0.002-0c0.551 ' +
    '0.001 0.998 0.448 0.998 1s-0.448 1-1 1zM19 8c-0.552 0-1-0.448-1-1s0.446-0.999 0.998-1c0 0 ' +
    '0.001 0 0.002 0s0.002-0 0.003-0c0.551 0.001 0.998 0.448 0.998 1s-0.448 1-1 1z';

  var path =
    "path://M1172.985723 682.049233l-97.748643-35.516964a32.583215 32.583215 " +
    "0 0 0-21.830134 61.582735l25.7398 9.123221-488.744218 238.181638L115.670112 " +
    "741.349163l47.245961-19.223356a32.583215 32.583215 0 0 0-22.808051-60.604819l-119.579777 " +
    "47.896905a32.583215 32.583215 0 0 0 0 59.952875l557.820313 251.540496a32.583215 " +
    "32.583215 0 0 0 27.695632 0l570.527227-278.584184a32.583215 32.583215 " +
    "0 0 0-3.258721-59.952875z,M1185.041693 482.966252l-191.587622-68.749123a32.583215 " +
    "32.583215 0 1 0-21.831133 61.254764l118.927833 43.010323-488.744218 " +
    "237.855666-471.474695-213.744727 116.973-47.244961a32.583215 32.583215 " +
    "0 1 0-24.111938-60.604819l-190.609705 75.593537a32.583215 32.583215 0 " +
    "0 0-20.528246 29.650465 32.583215 32.583215 0 0 0 20.528246 30.30141l557.819313 " +
    "251.866468a32.583215 32.583215 0 0 0 27.695632 0l570.201254-278.584184a32.583215 " +
    "32.583215 0 0 0 18.24744-30.953354 32.583215 32.583215 0 0 0-21.505161-29.651465z," +
    "M32.583215 290.075742l557.819313 251.540496a32.583215 32.583215 0 0 0 " +
    "27.695632 0l570.201254-278.584184a32.583215 32.583215 0 0 0-3.257721-59.952875L626.244463 " +
    "2.042365a32.583215 32.583215 0 0 0-23.134022 0l-570.527226 228.080502a32.583215 32.583215 " +
    "0 0 0-19.224357 30.627382 32.583215 32.583215 0 0 0 19.224357 29.325493zM615.817355 " +
    "67.534767l474.733416 170.408432-488.744218 238.180638-471.474695-215.372588z";

  var nodes = [
    {
      id: "1",
      name: "CRM系统",
      path: database,
      desc: "这是CMDB用的Oracle数据库，用来管理现有的CMDB资源以及自动发现的资源。",
      value: [300, 500],
      offset: [0, 0]
    },
    {
      id: "2",
      name: "主机",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [300, 350],
      offset: [0, 0],
      alarm: "10.181.1.1主机发生告警"
    },
    {
      id: "3",
      name: "数据库",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [300, 200],
      offset: [0, 0]
    },
    {
      id: "3-1",
      name: "数据库表空间",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [200, 100],
      offset: [0, 0]
    },
    {
      id: "3-2",
      name: "数据库用户",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [400, 100],
      offset: [0, 0]
    },
    {
      id: "4",
      name: "中间件",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [50, 350],
      offset: [0, 0]
    },
    {
      id: "5",
      name: "文件系统",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [550, 350],
      offset: [0, 0]
    },
    {
      id: "6",
      name: "主机用户",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [100, 200],
      offset: [0, 0]
    },
    {
      id: "8",
      name: "网络设备",
      desc: "为方便检索资源加入全文检索进行快速查询匹配的资源。",
      path: database,
      value: [500, 200],
      offset: [0, 0]
    },
    {
      id: "###",
      name: "",
      desc: "<ul><li>主机：</li><li>132台;</li></ul>" +
            "<ul><li>数据库：</li><li>5个;</li></ul>" +
        "<ul><li>中间件：</li><li>56个;</li></ul>" +
        "<ul><li>文件系统：</li><li>2301条;</li></ul>",
      path: star,
      value: [600, 600],
      offset: [0, 0]
    },
  ];
  var lines = [
    {
      source: "1",
      target: "2",
      ref: "",
      desc: "连接",
      coords: [[300, 500], [300, 350]]
    },
    {
      source: "2",
      target: "4",
      ref: "",
      desc: "连接",
      coords: [[300, 350], [50, 350]]
    },
    {
      source: "2",
      target: "6",
      ref: "",
      desc: "连接",
      coords: [[300, 350], [100, 200]]
    },
    {
      source: "2",
      target: "5",
      ref: "",
      desc: "连接",
      coords: [[300, 350], [550, 350]]
    },
    {
      source: "2",
      target: "8",
      ref: "",
      desc: "连接",
      coords: [[300, 350], [500, 200]]
    },
    {
      source: "2",
      target: "3",
      ref: "",
      desc: "连接",
      coords: [[300, 350], [300, 200]]
    },
    {
      source: "3",
      target: "3-1",
      ref: "",
      desc: "连接",
      coords: [[300, 200], [200, 100]]
    },
    {
      source: "3",
      target: "3-2",
      ref: "",
      desc: "连接",
      coords: [[300, 200], [400, 100]]
    }
  ];

  var links = [];
  lines.forEach(function (value, index, array) {
    if (value.source && value.target) {
      links.push({
        source: value.source,
        target: value.target,
        label: {
          normal: {
            show: true,
            formatter: value.ref
          }
        },
        lineStyle: {
          normal: {
            color: '#2b91e4'
          }
        }
      });
    }
  });

  var seriesData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      res.push({
        desc: data[i].desc,
        name: data[i].id,
        title: data[i].name,
        symbol: data[i].path,
        symbolSize: 25, //图标大小
        symbolOffset: data[i].offset,
        draggable: false,
        fixed: true,
        value: data[i].value,
        alarm: data[i].alarm,
        label: {
          normal: {
            position: data[i].direction ? data[i].direction : "bottom",
            distance: 2, //离图标多远
            show: true,
            textStyle: {
              fontSize: 12,
              color: "rgba(7,0,0,1)",
              fontWeight: 600
            },
           /* formatter: function (item) {
              // 细化设置
              return item.data.title || item.data.alias;
            }*/
          }
        },
        itemStyle: {
          color: data[i].icon_color ? data[i].icon_color : "rgba(8,130,230, 1)"
        }
      });
    }
    return res;
  };

  var option = {
    grid: {
      left: "50px",
      bottom: "0%",
      top: "0%",
      right: "5%"
    },
    xAxis: {
      show: false,
      type: "value"
    },
    yAxis: {
      show: false,
      type: "value"
    },
    tooltip:
      {
        textStyle: {
          fontSize: 8
        },
        formatter: function (params) {//悬浮提示框显示的内容
          /*if (params.data.isLink) {
            return 'hello';
          }*/
          if (params.dataType === 'node') {
            var html = '';
            var h = "";
            var h0 = "";
            var h1 = "";
            var h2 = "";
            var tmp = params.data.desc;
            if (tmp) {/*
              for (var x = 0; x < tmp.length; x++) {
              }
              h = "<ul>" +
                "<li>说明：</li>" +
                "<li>" + desc + "</li>" +
                "</ul>";*/
              html += "<div class='pop'>" +
                tmp + "</div>";
              return html;
            } else {
              return;
            }
          }
        }
      },//悬浮时的提示框，不设置时是随鼠标移动
    series: [
      {
        type: "graph",
        coordinateSystem: "cartesian2d",
        legendHoverLink: false,
        hoverAnimation: true,
        nodeScaleRatio: false,
        roam: false,
        lineStyle: {
          normal: {
            width: 0,
            shadowColor: "none",
            color: "transparent"
          }
        },
        links: links,
        data: seriesData(nodes),
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: function (item) {
                // 全局设置
                return item.data.title
              }
            }
          }
        },
      },
      {
        type: "lines",
        coordinateSystem: "cartesian2d",
        z: 1,
        animationEasing: "linear",
        clip: false,
        symbol: ['none', 'none'],
        label: {
          normal: {
            show: true,
            formatter: "1111",
            color: 'rgba(255,255,255, 1)',
            fontStyle: 'oblique',
            textStyle: {
              fontSize: 8
            },
          }
        },
        effect: {
          show: true,
          smooth: true,
          trailLength: 0,
          symbol: "arrow",
          color: "orange",
          symbolSize: 5,
          period: 4, //特效动画的时间
          loop: true
        },
        lineStyle: {
          curveness: 0,
          color: "#0ca361",
          opacity: 0.6,
          width: 1,
          type: "dashed"
        },
        data: lines
      }
    ]
  };

  var setting = {
    check: {
      // 启用CheckBox框,需要引入jquery.ztree.excheck.js
      enable: false,
      chkStyle: "checkbox",
      chkboxType: {"Y": "ps", "N": "ps"},
      chkDisabledInherit: true
    },
    data: {
      simpleData: {
        // 启用简单的数据格式
        enable: true
      }
    },
    view: {
      /* fontCss : {color:"#0080cc"},*/
      showLine: false, // 不显示连接线
      showIcon: false,
      dblClickExpand: true,
      selectedMulti: true,//可以多选
    },
    callback: {
      beforeClick: function (treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        zTree.expandNode(treeNode);
      },
      onClick: function (event, treeId, treeNode) {
        // 在这里进行点击操作
        $("#platform").html(treeNode.name);
        console.log("点击节点：" + treeNode.id + "：" + treeNode.name)
      },
    }
  };


  //初始化业务树
  function initTree() {
    var treeJson = [
      {id: "11-13", name: "CRM运维平台", open: true},
      {id: "11-14", name: "BOMC", open: true},
      {id: "11-15", name: "安全管理系统", open: true},
      {id: "11-16", name: "BOSS", open: true},
      {id: "11-12", name: "电渠平台", open: true},
      {id: "11-10", name: "管理信息系统", open: true},
      {id: "11-11", name: "大数据运营平台", open: true},
      {id: "11-13-15", name: "零售库存中心", pId: "11-13"},
      {id: "11-13-17", name: "个人网台", pId: "11-13"},
      {id: "11-13-22", name: "家庭终端进销存", pId: "11-13"},
      {id: "11-13-18", name: "管理系统", pId: "11-13"},
      {id: "11-13-20", name: "CBOSS", pId: "11-13"},
      {id: "11-13-21", name: "渠道集中化系统", pId: "11-13"},
      {id: "11-13-23", name: "产商品中心", pId: "11-13"},
      {id: "11-13-24", name: "ESOP系统", pId: "11-13"},
      {id: "11-13-11", name: "资金稽核系统", pId: "11-13"},
      {id: "11-13-13", name: "门户网站", pId: "11-13"},
      {id: "11-13-10", name: "业务稽核系统", pId: "11-13"},
      {id: "11-13-12", name: "无纸化系统", pId: "11-13"},
      {id: "11-13-14", name: "PaaS平台", pId: "11-13"},
      {id: "11-13-16", name: "客户交互中心", pId: "11-13"},
      {id: "11-13-19", name: "能力开放平台", pId: "11-13"}
    ]
    $.fn.zTree.init($("#treeDemo"), setting, treeJson);
    fuzzySearch('treeDemo', '#mySearchId', true, false); //初始化模糊搜索方法
  }

  var errTimes = 0;
  // 默认加载
  $(function () {
    initTree();
    var myChart = echarts.init(document.getElementById("cmdbGuideEcharts"));
    myChart.setOption(option);
    // 用于告警的动态效果
    var interval = "";
    try {
      interval = setInterval(function () {
        var dataI = [];
        for (var n = 0; n < nodes.length; n++) {
          var alarm = nodes[n].alarm;
          if (alarm && alarm !== '') {
            // option.series[0].data[n].symbolSize = 60
            option.series[0].data[n].label = {
              normal: {
                color: '#DC143C'
              }
            }
           option.series[0].itemStyle.normal.label.position = 'bottom';
            option.series[0].itemStyle.normal.label.formatter = function (item) {
              if (item.data.alarm !== undefined) {
                return item.data.title + '\n' + item.data.alarm + ''
              } else {
                return item.data.title
              }
            }
            dataI.push(n)
          }
        }
        myChart.setOption(option);
        var timeout = setTimeout(function () {
          for (var m = 0; m < dataI.length; m++) {
          //  option.series[0].data[dataI[m]].symbolSize = 50
            option.series[0].data[dataI[m]].label = {
              normal: {
                color: '#fff6f4'
              }
            }
            option.series[0].itemStyle.normal.label.formatter = function (item) {
              return item.data.title
            }
          }
          myChart.setOption(option)
        }, 500);
      }, 1000);
    } catch (e) {
      errTimes++;
    }
    var inter = setInterval(function () {
      if(errTimes >= 10) {
        errTimes = 0;
        clearInterval(interval);
        clearInterval(inter);
      }
    }, 20000);
  })

</script>
</body>
</html>
